<div class="layui-fluid" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    站内新闻管理
                </div>
                <div class="layui-card-body newsList">
                    <div class="layui-row">
                        <div class="layui-inline">
                            <label class="layui-form-label">新闻标题：</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" id="news_Title" name="news_Title"
                                       placeholder="请输入新闻标题">
                            </div>
                            <button class="layui-btn layui-btn-normal" v-on:click="loadDate">查询</button>
                        </div>
                    </div>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>标题</th>
                            <th>发布时间</th>
                            <th>作者</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in dataSource">
                            <td>{{item.id}}</td>
                            <td>{{item.title}}</td>
                            <td>{{item.publicdate}}</td>
                            <td>{{item.author}}</td>
                            <td>
                                <div class="layui-row">
                                    <div class="layui-col-xs6">
                                        <button class="layui-btn layui-bg-green layui-btn-sm" v-on:click="modifyDate"
                                                data-id="{{item.id}}">修改
                                        </button>
                                    </div>
                                    <div class="layui-col-xs6">
                                        <button class="layui-btn layui-bg-red layui-btn-sm" v-on:click="removeDate"
                                                data-id="{{item.id}}">删除
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!--翻页-->
                    <div id="laypageDemo"></div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var $ = layui.jquery;
    var vm = new Vue({
        // 生效范围
        el: '.newsList',
        // 双向绑定的内容
        data: {
            dataSource: []
        },
        methods: {
            // 查询所有新闻
            loadDate: function (page, rows) {
                var title = $("#news_Title").val();
                page = page ? page : 1;
                rows = rows ? rows : 5;
                this.$http({
                    url: 'news/list.do',
                    data: {
                        title: title,
                        page: page,
                        rows: rows,
                    }
                }).then(function (res) {
                    var data = res.data;
                    vm.dataSource = data.rows;
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'laypageDemo',
                            count: data.total,
                            limit: rows,
                            curr: page,
                            jump: function (obj, first) {
                                // 如果是首页（首次不执行）
                                if (!first) {
                                    vm.loadDate(obj.curr, obj.limit)
                                }

                            }
                        })
                    })
                })

            },
            //删除一个新闻
            removeDate: function (e) {
                if (!confirm("你确认要删除该新闻信息吗？")) {
                    return;
                }
                this.$http({
                    url: 'news/delete.do?id=' + e.target.dataset.id,
                    data: {}
                }).then(function (res) {
                    var data = res.data;
                    if (data.code != 0) {
                        alert(data.errMsg);
                        return;
                    }
                    alert("删除成功");
                    vm.loadDate()
                })
            },
            /**
             * 修改 一个新闻信息
             * @param e
             */
            modifyDate: function (e) {
                location.href = '#/news/add?/id=' + e.target.dataset.id;
            }
        }


    });
    // 初始化数据
    vm.loadDate()
</script>